<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生信息管理系统</title>
  <!-- 引入 Font Awesome 字体图标库 -->
  <link rel="stylesheet" href="../../static/css/studentlist.css">
  <link rel="stylesheet" href="../../static/css/all.min.css">
  <style>
    a{
      text-decoration: none;
    }
    :root {
      --primary-color: #4361ee;
      --secondary-color: #3f37c9;
      --accent-color: #4895ef;
      --light-color: #f8f9fa;
      --dark-color: #212529;
      --success-color: #4cc9f0;
      --warning-color: #f8961e;
      --danger-color: #f72585;
      --border-radius: 8px;
      --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      --border-color: #e0e0e0;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f5f7fa;
      color: var(--dark-color);
      line-height: 1.6;
      padding: 20px;
    }

    .container {
      max-width: 1400px;
      margin: 0 auto;
      background: white;
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);
      overflow: hidden;
    }

    /* 工具栏样式 */
    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      padding: 20px;
      background: white;
      border-bottom: 1px solid var(--border-color);
      align-items: center;
    }

    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-primary {
      background-color: var(--primary-color);
      color: white;
    }

    .btn-primary:hover {
      background-color: var(--secondary-color);
    }

    .btn-search {
      background-color: var(--success-color);
      color: white;
    }

    .btn-search:hover {
      background-color: #3ab7d8;
    }

    .search-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      flex: 1;
      min-width: 200px;
    }

    .form-control {
      padding: 10px 15px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      font-size: 14px;
      transition: all 0.3s;
      min-width: 150px;
    }

    .form-control:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
      outline: none;
    }

    /* 表格样式 */
    .table-container {
      width: 100%;
      overflow-x: auto;
    }

    .data-table {
      width: 100%;
      border-collapse: collapse;
    }

    .data-table thead {
      background-color: var(--primary-color);
      color: white;
    }

    .data-table th {
      padding: 15px;
      text-align: center;
      font-weight: 500;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .data-table tbody tr {
      border-bottom: 1px solid var(--border-color);
      transition: all 0.2s ease;
    }

    .data-table tbody tr:hover {
      background-color: rgba(67, 97, 238, 0.05);
    }

    .data-table td {
      padding: 15px;
      color: #495057;
      font-size: 14px;
      text-align: center;
      vertical-align: middle;
    }

    /* 操作按钮样式 */
    .action-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 12px;
      margin-right: 5px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      background: none;
      cursor: pointer;
      color: #adb5bd;
      transition: all 0.2s ease;
    }

    .action-btn:hover {
      background-color: #f0f0f0;
      color: var(--primary-color);
    }

    /* 分页器样式 */
    .pagination-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      background: white;
      border-top: 1px solid var(--border-color);
    }

    .page-size-selector {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .page-size-selector label {
      font-size: 14px;
    }

    .pagination {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .page-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      background: none;
      cursor: pointer;
      transition: all 0.2s;
    }

    .page-btn:hover {
      border-color: var(--primary-color);
      color: var(--primary-color);
    }

    .page-btn.active {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      color: white;
    }

    .page-btn.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .page-numbers {
      display: flex;
      gap: 5px;
    }

    /* 模态框样式 */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .modal-content {
      background-color: white;
      padding: 25px;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      width: 500px;
      position: relative;
      animation: fadeIn 0.3s;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .close-btn {
      position: absolute;
      top: 15px;
      right: 20px;
      font-size: 24px;
      color: #999;
      cursor: pointer;
      transition: color 0.2s;
    }

    .close-btn:hover {
      color: #666;
    }

    .modal h2 {
      margin-bottom: 10px;
      font-size: 18px;
      color: #2c3e50;
    }

    .form-group {
      margin-bottom: 10px;
    }

    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: 500;
    }

    .radio-group {
      display: flex;
      gap: 15px;
    }

    .radio-group label {
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
    }

    .avatar-upload {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .avatar-preview {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      background-color: #f5f7fa;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .avatar-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .btn-upload {
      padding: 8px 15px;
      background-color: var(--accent-color);
      color: white;
      border-radius: var(--border-radius);
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-upload:hover {
      background-color: #3a7bd5;
    }

    .btn-submit {
      width: 100%;
      padding: 12px;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-size: 16px;
      transition: all 0.2s;
    }

    .btn-submit:hover {
      background-color: var(--secondary-color);
    }

    /* 分析模态框特定样式 */
    .analysis-modal-content {
      width: 600px;
    }

    .analysis-content {
      max-height: 400px;
      overflow-y: auto;
      margin-bottom: 20px;
      padding: 20px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
    }

    .analysis-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .btn-cancel {
      padding: 8px 20px;
      background-color: #ecf0f1;
      color: #7f8c8d;
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
    }

    .btn-cancel:hover {
      background-color: #d5dbdb;
    }

    .btn-download {
      padding: 8px 20px;
      background-color: #2b579a;
      color: white;
      border: none;
      text-decoration: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-download:hover {
      background-color: #1e3f6f;
    }

    /* 添加头像相关样式 */
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #e0e0e0;
    }

    .avatar-placeholder {
      font-size: 40px;
      color: #adb5bd;
    }

    /* 修改表格中的操作按钮样式 */
    .btn-edit, .btn-delete, .btn-ai {
      padding: 5px 10px;
      margin: 2px;
      font-size: 12px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
    }

    .btn-edit {
      background-color: #4895ef;
      color: white;
      border: none;
    }

    .btn-delete {
      background-color: #f72585;
      color: white;
      border: none;
    }

    .btn-ai {
      background-color: #4cc9f0;
      color: white;
      border: none;
    }

    .btn-edit:hover, .btn-delete:hover, .btn-ai:hover {
      opacity: 0.8;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    #confirmModal {
      z-index: 1001; /* 比 analysisModal 更高 */
    }
    .confirmModal{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    /* 正确提示框样式 */
    .alert-success {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 15px 20px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      max-width: 80%;
      animation: slideIn 0.3s ease-out forwards;
    }
    .alert-danger {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 15px 20px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      border: 1px solid #c3e6cb;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      max-width: 80%;
      animation: slideIn 0.3s ease-out forwards;
    }
    .alert-success i {
      margin-right: 10px;
      font-size: 18px;
    }

    .alert-close {
      margin-left: 15px;
      background: none;
      border: none;
      color: inherit;
      font-size: 20px;
      cursor: pointer;
      padding: 0 0 0 10px;
      line-height: 1;
    }

    /* 动画效果 */
    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translate(-50%, -30px);
      }
      to {
        opacity: 1;
        transform: translate(-50%, 0);
      }
    }

    @keyframes slideOut {
      from {
        opacity: 1;
        transform: translate(-50%, 0);
      }
      to {
        opacity: 0;
        transform: translate(-50%, -30px);
      }
    }
    .alert {
      padding: 15px;
      margin-bottom: 20px;
      border: 1px solid transparent;
      border-radius: 4px;
      display: none; /* 默认隐藏，通过JS控制显示 */
    }

    .alert-danger {
      color: #a94442;
      background-color: #f2dede;
      border-color: #ebccd1;
    }

    .alert i.fas {
      margin-right: 10px;
    }

    .errorMessage {
      font-weight: bold;
    }

    /* 如果需要动画效果可以添加 */
    .alert.show {
      display: block;
      animation: fadeIn 0.3s;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    </style>
  </style>
</head>
<body>
<div class="alert alert-danger" style="display: none;">
  <i class="fas fa-exclamation-circle"></i>
  <span id="error-message" class="errorMessage">修改失败</span>
</div>
<!-- 正确提示框 -->
<div class="alert alert-success" id="success-alert" style="display: none;">
  <i class="fas fa-check-circle"></i>
  <span id="success-message">试卷已发布</span>
  <button class="alert-close">&times;</button>
</div>
<div class="container">
  <div class="toolbar">
    <button class="btn btn-primary" id="addBtn">
      <i class="fas fa-plus"></i> 添加
    </button>

    <div class="search-group">
      <input type="text" class="form-control" id="studentname" placeholder="请输入姓名">

      <select id="studentclassName" class="form-control">
        <option value="">请选择班级</option>
        <option value="计算机1班">计算机1班</option>
        <option value="计算机2班">计算机2班</option>
      </select>

      <input type="text" class="form-control" id="studentphone" placeholder="手机号">
      <button class="btn btn-search btnSearch">
        <i class="fas fa-search"></i> 搜索
      </button>
    </div>
  </div>

  <div class="table-container">
    <table class="data-table">
      <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>头像</th>
        <th>年龄</th>
        <th>性别</th>
        <th>班级名称</th>
        <th>学号</th>
        <th>手机号</th>
        <th>操作</th>
        <th>AI分析</th>
      </tr>
      </thead>
      <tbody id="tableBody">
      <!-- 数据将通过JS动态加载 -->
      </tbody>
    </table>
  </div>

  <div class="pagination-controls">
    <div class="page-size-selector">
      <label for="pageSize">每页显示:</label>
      <select id="pageSize" class="form-control">
        <option value="5">5条</option>
        <option value="10" selected>10条</option>
        <option value="20">20条</option>
        <option value="50">50条</option>
        <option value="100">100条</option>
      </select>
    </div>

    <div class="pagination">
      <button class="page-btn" id="prevPage"><i class="fas fa-chevron-left"></i></button>
      <div class="page-numbers" id="pageNumbers">
        <!-- 页码将通过JS动态生成 -->
      </div>
      <button class="page-btn" id="nextPage"><i class="fas fa-chevron-right"></i></button>
    </div>
  </div>

</div>

<!-- 添加/编辑模态框 -->
<div class="modal" id="studentModal">
  <div class="modal-content">
    <span class="close-btn" id="closeModal">&times;</span>
    <h2 id="modalTitle">添加学生信息</h2>
    <form id="studentForm">
      <input type="hidden" id="studentId">
      <div class="form-group">
        <label for="name">姓名</label>
        <input type="text" id="name" class="form-control" required>
      </div>
      <div class="form-group">
        <label>头像</label>
        <div class="avatar-upload">
          <div class="avatar-preview" id="avatarPreview">
            <img src="" class="avatar-image" id="avatarDisplay">
          </div>
          <label for="avatar" class="btn btn-upload">
            <i class="fas fa-upload"></i> 选择头像
          </label>
          <input type="file" id="avatar" accept="image/*" style="display: none;">
        </div>
      </div>
      <div class="form-group">
        <label for="age">年龄</label>
        <input type="number" id="age" class="form-control" min="0" required>
      </div>
      <div class="form-group">
        <label>性别</label>
        <div class="radio-group">
          <label><input type="radio" name="sex" value="男" checked> 男</label>
          <label><input type="radio" name="sex" value="女"> 女</label>
        </div>
      </div>
      <div class="form-group">
        <label for="className">班级</label>
        <select id="className" class="form-control">
          <option value="">请选择班级</option>
        </select>
      </div>
      <div class="form-group">
        <label for="sno">学号</label>
        <input type="text" id="sno" class="form-control" required>
      </div>
      <div class="form-group">
        <label for="phone">手机号</label>
        <input type="tel" id="phone" class="form-control" required>
      </div>
      <button type="submit" class="btn btn-submit">保存</button>
    </form>
  </div>
</div>

<!-- 分析结果提示框 -->
<div class="modal" id="analysisModal">
  <div class="modal-content analysis-modal-content">
    <span class="close-btn" id="closeAnalysisModal">&times;</span>
    <h3>分析结果</h3>
    <div class="analysis-content elegant-report" id="analysisContent report-container">
      <!-- 分析结果将通过JS动态加载 -->
    </div>
    <div class="analysis-footer">
      <button class="btn btn-cancel" id="cancelAnalysis">取消</button>
      <a href="" class="btn btn-download"  download id="downloadBtn">
        <i class="fas fa-file-word"></i> 下载Word版
      </a>
    </div>
  </div>
</div>
<div id="compact-loader" style="
  position: fixed;
  top:50%;
  left:50%;
  right: 20px;
  width: 240px;
  padding: 12px;
  background: rgba(0,0,0,0.85);
  border-radius: 8px;
  display: none;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.3s;
  translate: -120px 0px;
  color: white;
  font-family: sans-serif;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
">
  <div class="spinner" style="
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 12px;
  "></div>
  <span class="text">正在进行AI分析，请等待</span>
</div>
<!-- 确认提示框 -->
<div class="confirmModal" id="confirmModal">
  <div class="modal-content" style="width: 400px;">
    <span class="close-btn" id="closeConfirmModal">&times;</span>
    <h3 id="confirmTitle">该学生已有AI分析结果</h3>
    <div class="confirm-content" id="confirmContent" style="margin-bottom: 20px;">
      <!-- 提示内容将通过JS动态加载 -->
    </div>
    <div class="confirm-footer" style="display: flex; justify-content: flex-end; gap: 10px;">
      <button class="btn btn-primary" id="confirmYes">是</button>
      <button class="btn btn-cancel" id="confirmNo">否</button>
    </div>
  </div>
</div>

<script src="../../static/js/marked.min.js"></script>
<script src="../../static/js/jquery.js"></script>
<script src="../../static/js/jquery.cookie.js"></script>
<script src="../../static/js/studentlist.js"></script>
</body>
</html>